<div class="collections_carousel">
	<div class="title">
	   <?php 
	       $escaper = new Zend\Escaper\Escaper('utf-8');
	   
	       echo $escaper->escapeHtml($this->title); 
	   ?>
	</div>

	<div class="pagination_button previous"></div>
	<div id="collectionsItemContainer">
        <?php
            echo $this->headScript()->prependFile($this->basePath() . '/js/jPages.min.js', 'text/javascript');
            echo $this->headLink()->appendStylesheet($this->basePath() . '/css/jPages.css');
            
            for ($i = 0; $i < count($this->collections); $i ++) {
                $name = $this->collections[$i]->getName();
                $imageUrl = $this->collections[$i]->getImageUrl();
                
                echo sprintf('<div class="item"><img src="%s"/><div class="name">%s</div></div>', 
                    $escaper->escapeHtmlAttr($imageUrl), $escaper->escapeHtml($name));
            }
        ?>
    </div>
	<div class="pagination_button next"></div>
    <div class="collections_holder"></div>
</div>

<script type="text/javascript">
    $("div.collections_holder").jPages({
        containerID : "collectionsItemContainer",
        perPage      : 3,
        previous    : ".collections_carousel .previous",
        next        : ".collections_carousel .next",
    });
</script>